<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/emigrated' }"
          >关卡管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/emigrated/addEmigrated">关卡添加</a></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="describe">
      <el-descriptions class="margin-top" title="添加关卡" :column="3" border>
        <template #extra>
          <el-button @click="Esave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡名</div>
          </template>
          <el-input v-model="Ename" placeholder="关卡名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡类型</div>
          </template>
          <el-select v-model="Etype" placeholder="关卡类型">
            <el-option label=".NET" value="shanghai" />
            <el-option label="JAVA" value="beijing" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡数量</div>
          </template>
          <el-input-number
            v-model="ECount"
            :min="1"
            :max="10000"
            @change="handleChange"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
          </template>
          <el-input-number
            v-model="EquestionCount"
            :min="1"
            :max="10000"
            @change="handleChange"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关条件(百分比用0.1代替)</div>
          </template>
          <el-input-number v-model="Econdition" :step="0.1" :min="0" :max="1" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关时间(分钟)</div>
          </template>
          <el-input v-model="Etime" placeholder="通关时间" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡难度(关卡最大难度)</div>
          </template>
          <el-input-number
            v-model="Elv"
            :min="1"
            :max="10"
            @change="handleChange"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { AddEmigrated } from "@/utils/Exam/emigrted/addEmigrated";
import router from "@/router";
import { ElMessage } from "element-plus";

export default defineComponent({
  setup() {
    const data = reactive<AddEmigrated>({
      Ename: "",
      ECount: 0,
      EquestionCount: 0,
      Econdition: 0.0,
      Etime: "",
      Elv: 0,
      Etype: "",
    });
    const methods = {
      Esave() {
        ElMessage.success("添加成功");
        router.push("/emigrated");
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
</style>
